<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularJs</title>
    <meta name="Copyright" content="All Rights Reserved"/>
    <link rel="shortcut icon" type="image/x-icon" href="itcast.ico"/>
    <link rel="stylesheet" type="text/css" href="base.css"/>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript">
        /**
         * 定义模块
         */
        var myApp = angular.module("myApp", []);

        /**给模块添加控制器*/
        myApp.controller("myController", function($scope, $http){
            // 发送异步请求
            $scope.sendGet = function(){
                $http.get("/data.json").then(
                    function(response){ // 请求成功
                        // response响应对象，封装了响应数据、状态码等
                        $scope.list = response.data;
                    },function(response){ // 请求失败
                        alert("数据加载失败！");
                    }
                );
            };
        });
    </script>
</head>
<!-- 指定AngularJS应用的根元素 -->
<body ng-app="myApp" ng-controller="myController" ng-init="sendGet()">
<table border="1">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr ng-repeat="user in list">
        <td>{{$index+1}}</td>
        <td>{{user.name}}</td>
        <td>{{user.sex}}</td>
        <td>{{user.age}}</td>
    </tr>
</table>
</body>
</html>